<script setup>

import { ref } from 'vue'
const isShow = ref(true)
</script>

<template>
  <h1>隐藏显示指令</h1>
  <!-- v-if="布尔值”true元素显示false元素消失
      false表示该元素不会被渲染到DOM中，直接跳过该元素的渲染-->
  <p v-if="true">张三</p>
  <p v-if="false">李四</p>
  <hr>
  <!-- v-show="布尔值”true元素显示false元素消失
      false是通过修改display:none; CSS属性让元素消失的-->
  <p v-show="true">王五</p>
  <p v-show="false">赵六</p>
  <!-- v-if和v-show的区别
      v-if:控制元素是否渲染到DOM中
      v-show:控制元素的显示和隐藏-->
  <hr>
  <!-- v-else 找离自己最近的v-if进行取反显示-->
  <h4 v-if="isShow">太阳</h4>
  <h4 v-else>月亮</h4>

</template>

<style scoped>

</style>